<template>
  <div class="home">
    <el-container>
      <el-header class="fixed-header">
        <!-- 头部 div -->
        <div class="header-dd">
          <!-- 头部 div 内容 -->
          <div class="div1">
            <div class="div1-1">
              <a href="#/homes">
                <img src="../assets/itlogo.jpg" class="img1">
              </a>
            </div>
            <div class="dddd"></div>
            <input class="div1-2" v-model="searchValue">
            <div class="ddd" @click="handleSearch"><span class="span999">搜索</span></div>
            <!-- <input type="text" class="ddd"> -->
            <!-- </input> -->
            <div class="div1-3">
              <div class="div1-5">
                <el-popover
    placement="top-start"
    width="200"
    trigger="hover">
    <div>
      <img src="../assets/erweima.jpg" style="width: 100%; height: 100%;">
    </div>
    <span class="span111" slot="reference" style="border-style:none;">添加群聊</span>
  </el-popover>&nbsp;&nbsp;&nbsp;
                <span class="span111" @click="handleMemberCenter">会员中心</span>&nbsp;&nbsp;&nbsp;
                <span class="span111">|</span>&nbsp;&nbsp;&nbsp;
                <span class="span111" @click="handleMyStudy">我的学习</span>&nbsp;&nbsp;&nbsp;
                <span class="span111">|</span>&nbsp;&nbsp;&nbsp;
                <!-- <span class="span111" v-show="id === null || id === ''" @click="handleLoginRegister">登录/注册</span> -->
                <span class="span111" v-show="id === null || id === ''" @click="openLogin">登录/注册</span>
              </div>
              <div class="dd"></div>
              <div class="div1-4">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-image ref="elImageRef" style="width: 40px; height: 40px" :src="imageUrl" @click="handleClick" v-if="imageUrl !=0"> </el-image>
                    <img src="../assets/avav.jpg" style="width: 40px; height: 40px;border-radius:50%"  @click="handleClick" v-if="imageUrl == 0">
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="gerenxx" style="display: block; width: 100%;user-select: none;">个人中心</span></el-dropdown-item>
                    <el-dropdown-item><span @click="logout" style="display: block; width: 100%;user-select: none;">退出</span></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-dialog :visible.sync="loginButton" width="440px" style="text-align: left" :before-close="handleClose" class="custom-dialog" :close-on-click-modal="false">
        <div style="width:85%;margin:0 auto;user-select: none;"  v-if="dengluButton==true">
          <el-tabs v-model="activeName" stretch>
            <el-tab-pane :label="tabLabel1" name="first" class="tab-label">
              <!-- 手机号密码登录 -->
              <div v-if="phoneCode==false">
                <div style="width:100%;height:30px"><span style="font-size:11px;float:right" class="spansdfg" @click="gophonecode"><i class="el-icon-chat-line-round" style="font-size:16px"></i> 使用短信验证登录</span></div>
                <el-form :model="phoneForm" ref="phoneForm" :rules="phoneFormRoles">
                  <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号" v-model="phoneForm.phone" class="custom-input">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="phoneForm.password" class="custom-input" type="password">
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-button style="width: 100%;background:rgb(63, 185, 103);color:#FFFFFF;font-size:16px;margin-bottom:10px" @click="phoneLogin()">登录</el-button>
                <el-checkbox v-model="checked"><span style="font-size:12px">三十天内免密登录</span>
                </el-checkbox>
                <!-- &nbsp;|&nbsp;
                <span style="font-size:12px" class="wangji">忘记密码？</span> -->
                <span @click="goregister" style="float:right;font-size:12px;color:rgb(63, 185, 103);" class="zhucece">去注册 ></span>
              </div>
              <!-- 手机号验证码登录 -->
              <div v-if="phoneCode==true">
                <div style="width:100%;height:30px">
                  <span style="font-size:11px;float:right" class="spansdfg" @click="gophone"><i class="el-icon-chat-line-round" style="font-size:16px"></i> 使用密码登录</span>
                </div>
                <el-form :model="phoneCodeForm" ref="phoneCodeForm" :rules="phoneCodeFormRoles">
                  <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号" v-model="phoneCodeForm.phone" class="custom-input">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input placeholder="请输入验证码" v-model="phoneCodeForm.code" class="custom-input" style="width:50%">
                    </el-input>
                  <el-button style="margin-left: 3%; width: 47%; border: 1px solid rgb(63, 185, 103);font-size:13px" @click="phoneSentCode" :disabled="phoneDisabled">{{ phoneDisabled ? phoneTimer + 's 后获取验证码' : '获取验证码' }}</el-button>
                  </el-form-item>
                </el-form>
                <el-button style="width: 100%;background:rgb(63, 185, 103);color:#FFFFFF;font-size:16px;margin-bottom:10px" @click="phoneCodeLogin">登录</el-button>
                <el-checkbox v-model="checked"><span style="font-size:12px">三十天内免密登录</span></el-checkbox>
                <!-- &nbsp;|&nbsp;
                <span style="font-size:12px" class="wangji">忘记密码？</span> -->
              </div>
            </el-tab-pane>
            <el-tab-pane :label="tabLabel2" name="second" class="tab-label">
              <div v-if="emailCode == false">
                <div style="width:100%;height:30px">
                  <span style="font-size:11px;float:right" class="spansdfg" @click="goemailcode"><i class="el-icon-chat-line-round" style="font-size:16px"></i> 使用邮箱验证登录</span>
                </div>
                <el-form :model="emailForm" ref="emailForm" :rules="emailFormRoles">
                  <el-form-item prop="email">
                    <el-input placeholder="请输入邮箱" v-model="emailForm.email" class="custom-input">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="emailForm.password" type="password" class="custom-input">
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-button style="width: 100%;background:rgb(63, 185, 103);color:#FFFFFF;font-size:16px;margin-bottom:10px" @click="emailLogin">登录</el-button>
                <el-checkbox v-model="emailChecked"><span style="font-size:12px">三十天内免密登录</span></el-checkbox>
                <!-- &nbsp;|&nbsp;
                <span style="font-size:12px" class="wangji">忘记密码？</span> -->
              </div>
              <div v-if="emailCode == true">
                <div style="width:100%;height:30px">
                  <span style="font-size:11px;float:right" class="spansdfg" @click="goemail"><i class="el-icon-chat-line-round" style="font-size:16px"></i> 使用邮箱密码登录</span>
                </div>
                <el-form :model="emailCodeForm" ref="emailCodeForm" :rules="emailCodeFormRoles">
                  <el-form-item prop="email">
                    <el-input placeholder="请输入邮箱" v-model="emailCodeForm.email" class="custom-input">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input placeholder="请输入验证码" v-model="emailCodeForm.code" class="custom-input" style="width:50%">
                    </el-input>
                    <el-button style="margin-left: 3%; width: 47%; border: 1px solid rgb(63, 185, 103);font-size:13px" @click="emailSendCode" :disabled="emailDisabled">{{ emailDisabled ? emailTimer + 's 后获取验证码' : '获取验证码' }}</el-button>
                  </el-form-item>
                </el-form>
                <el-button style="width: 100%;background:rgb(63, 185, 103);color:#FFFFFF;font-size:16px;margin-bottom:10px" @click="emailCodeLogin">登录</el-button>
                <el-checkbox v-model="emailChecked"><span style="font-size:12px">三十天内免密登录</span></el-checkbox>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="dengluButton==false" style="width:85%;margin:0 auto;">
          <span style="font-size:18px">用户注册</span>
          <div style="height:20px"></div>
          <el-form :model="registerForm" ref="registerForm" :rules="registerFormRules">
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号" v-model="registerForm.phone" :maxlength="11" class="custom-input"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="registerForm.password" :maxlength="18" type="password" show-password class="custom-input"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                    <el-input placeholder="请输入验证码" v-model="registerForm.code" class="custom-input" style="width:50%">
                    </el-input>
                  <el-button style="margin-left: 3%; width: 47%; border: 1px solid rgb(63, 185, 103);font-size:13px" @click="registerGetCode" :disabled="isDisabled">{{ isDisabled ? registTimer + 's 后获取验证码' : '获取验证码' }}</el-button>
                  </el-form-item>
          </el-form>
          <el-button style="width: 100%; background: rgb(63, 185, 103); color: #FFFFFF; font-size: 16px; margin-bottom: 10px" @click="register">注册</el-button>
          <el-checkbox v-model="anquanChecked"><span style="font-size:12px">我同意<span>《用户使用协议》</span>和<span>《智学IT隐私政策》</span></span></el-checkbox>
          <span style="float:right;font-size:12px;color:rgb(63, 185, 103);" class="zhucece" @click="dengluButton=true">去登录 ></span>
        </div>
      </el-dialog>
      <!-- <el-main> -->
      <!-- 主内容 div -->
      <!-- <div class="main-dd"> -->
      <router-view />
      <!-- </div>
      </el-main> -->
      <!-- 底部 div -->
      <el-footer style="height:190px">
        <div class="footer-dd">
          <!-- 底部 div 内容 -->
          <div class="div3"></div>
          <div class="div3-1">
            <span class="span1">关于我们</span>&nbsp;&nbsp;
            <span class="span1">联系我们</span>&nbsp;&nbsp;
            <span class="span1">帮助中心</span>&nbsp;&nbsp;
            <span class="span1">中国大学MOOC</span>&nbsp;&nbsp;
            <span class="span1">卡搭编程</span>&nbsp;&nbsp;
            <span class="span1">有道智云</span>&nbsp;&nbsp;
            <span class="span1">有道社招</span>&nbsp;&nbsp;
            <span class="span1">有道校招</span>&nbsp;&nbsp;
            <span class="span1">廉政举报</span>&nbsp;&nbsp;
            <!-- <br> -->
            <!-- <p class="span2">©1997-2023 网易公司 版权所有粤B2-20090191-18 工业和信息化部备案管理系统网站</p> -->
          </div>
          <div class="div3-2">
            <p class="span2">©1997-2023 &nbsp;追云工作室&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粤B2-20090191-18 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工业和信息化部备案管理系统网站</p>
          </div>
          <div class="div3-2">
            <p class="span2">违法和不良信息举报电话（涉未成年人）：0571-89853416&nbsp;举报邮箱（涉未成年人）：youdao_jubao@rd.netease.com 网上有害信息举报专区</p>
          </div>
          <div class="div3-2">
            <p class="span2">监督举报邮箱：jb@rd.netease.com</p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import { EventBus } from '@/main'
export default {
  name: 'HomeView',
  data () {
    return {
      user: {},
      // 注册发送验证码禁用
      isDisabled: false,
      // 手机号登录发送验证码禁用
      phoneDisabled: false,
      // 手机登录验证码禁用时长 60s
      phoneTimer: 60,
      // 邮箱验证码发送验证码禁用
      emailDisabled: false,
      // 邮箱登录验证码禁用时长 60s
      emailTimer: 60,
      // 登录注册页面显示按钮
      dengluButton: true,
      // 手机号验证码登录按钮
      phoneCode: false,
      // 邮箱验证码登录按钮
      emailCode: false,
      // 邮箱免登录按钮
      emailChecked: false,
      // 手机号免登录按钮
      checked: false,
      // 用户协议按钮
      anquanChecked: false,
      // 登录显示页
      activeName: 'first',
      searchValue: '',
      // 手机号密码登录表单
      phoneForm: {
      },
      // 手机号密码登录表单验证
      phoneFormRoles: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      // 手机号验证码登录表单
      phoneCodeForm: {},
      // 手机号验证码登录表单验证
      phoneCodeFormRoles: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // 邮箱密码登录表单
      emailForm: {},
      // 邮箱密码登录表单验证
      emailFormRoles: {
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
            message: '邮箱格式错误',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      // 邮箱验证码登录表单
      emailCodeForm: {},
      // 邮箱验证码登录验证
      emailCodeFormRoles: {
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
            message: '邮箱格式错误',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // 注册表单
      registerForm: {
        phone: '',
        password: '',
        code: ''
      },
      registerFormRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1(3|4|5|7|8|9)\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // 获取的登录id
      id: '',
      // 获取的用户头像
      avatarUrl: '',
      imageUrl: 0,
      tabLabel1: '手机号登录',
      tabLabel2: '邮箱登录',
      // 登录窗口
      loginButton: false,
      registTimer: 60,
      expirationInDays: 1,
      userInfo: {}
    }
  },
  mounted () {
    // 全局组件
    EventBus.$on('showLoginDialog', () => {
      this.loginButton = true
    })
  },
  methods: {
    getFrontUserImg () {
      this.$axios.get('/FrontDeskUser/getFrontUserImg?id=' + this.id).then((res) => {
        this.avatarUrl = res.data.data
        // 如果avatarUrl有值，则替换el-image的src属性
        if (this.avatarUrl) {
          this.imageUrl =
        'http://101.43.223.224:8765/image/getImageById?id=' + this.avatarUrl
        }
      })
    },
    // 去注册
    goregister () {
      this.dengluButton = false
      this.phoneForm = {}
    },
    // 去手机号验证码登录
    gophonecode () {
      this.phoneCode = true
      this.phoneForm = {}
    },
    // 去手机号密码登录
    gophone () {
      this.phoneCode = false
      this.phoneCodeForm = {}
    },
    // 去邮箱验证码登录
    goemailcode () {
      this.emailCode = true
      this.emailForm = {}
    },
    // 去邮箱密码登录
    goemail () {
      this.phoneCode = false
      this.emailCodeForm = {}
    },
    handleClick () {},
    gerenxx () {
      // 判断是否登录
      if (this.id === null || this.id === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          this.loginButton = true
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 执行跳转页面
        this.$router.push('/PersonalInfo')
      }
    },
    logout () {
      // 判断是否登录
      if (this.id !== null && this.id !== '') {
        this.$confirm('是否退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 跳转到首页
          this.$router.push('/homes').then(() => {
          // 清空本地存储的数据
            localStorage.removeItem('user')
            // 重新加载当前页面
            location.reload()
          })
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 不进行任何操作
      }
    },
    // 搜索点击事件
    handleSearch () {
      const trimmedSearchValue = this.searchValue.trim()
      if (!trimmedSearchValue) {
        return
      }

      this.$router.push(`/search?searchValue=${trimmedSearchValue}`).then(() => {
        // 重新加载当前页面
        location.reload()
      })
    },
    handleAddWechat () {
    },
    handleMemberCenter () {
      this.$router.push('/hmember')
    },
    handleMyStudy () {
      // 判断是否登录
      // 判断是否登录
      if (this.id === null || this.id === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          this.loginButton = true
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        this.$router.push('/Timetable')
      }
    },
    handleLoginRegister () {
      this.$router.push('/login')
    },
    openLogin () {
      this.loginButton = true
    },
    // 关闭对话框
    handleClose (done) {
      // 在这里编写您的关闭逻辑
      // 例如执行某个操作后再关闭对话框
      this.phoneForm = {}
      this.emailForm = {}
      this.loginButton = false
    },
    // 注册发送验证码
    registerGetCode () {
      if (this.registerForm.phone.trim() === '') {
        this.$message.error('请输入手机号')
        return
      }
      this.isDisabled = true
      // 模拟发送请求获取验证码的异步操作，此处使用 axios 发送 POST 请求
      this.$axios.post('/pcLogin/phoneSendCode', this.registerForm)
        .then((res) => {
          if (res.data.code === 200) {
            console.log('验证码发送成功')

            const countdown = setInterval(() => {
              this.registTimer--
              if (this.registTimer <= 0) {
                clearInterval(countdown) // 清除倒计时
                this.isDisabled = false // 恢复获取验证码按钮可用状态
                this.registTimer = 60
              }
            }, 1000)
          }
        })
        .catch((error) => {
          console.log('请求异常', error)
        })
    },
    // 注册
    register () {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 注册表单验证通过，执行注册逻辑
          this.$axios.post('/pcLogin/register', this.registerForm)
            .then((res) => {
              if (res.data.code === 200) {
                console.log('注册成功')
                this.phoneCodeForm.phone = this.registerForm.phone
                this.phoneForm.parse = this.registerForm.phone
                this.registerForm = {}
                this.dengluButton = true
              }
            })
            .catch((error) => {
              console.log('请求异常', error)
            })
        } else {
          // 注册表单验证不通过，处理验证失败逻辑
        }
      })
    },
    // 邮箱发送验证码
    emailSendCode () {
      if (this.emailCodeForm.email.trim() === '') {
        this.$message.error('请输入手机号')
        return
      }
      this.emailDisabled = true
      // 模拟发送请求获取验证码的异步操作，此处使用 axios 发送 POST 请求
      this.$axios.post('/pcLogin/emailSendCode', this.emailCodeForm)
        .then((res) => {
          if (res.data.code === 200) {
            console.log('验证码发送成功')

            const countdown = setInterval(() => {
              this.emailTimer--
              if (this.emailTimer <= 0) {
                clearInterval(countdown) // 清除倒计时
                this.emailDisabled = false // 恢复获取验证码按钮可用状态
                this.emailTimer = 60
              }
            }, 1000)
          }
        })
        .catch((error) => {
          console.log('请求异常', error)
        })
    },
    // 邮箱验证码登录
    emailCodeLogin () {
      this.$refs.emailCodeForm.validate((valid) => {
        if (valid) {
          // 注册表单验证通过，执行注册逻辑
          this.$axios.post('/pcLogin/emailCodeLogin', this.emailCodeForm)
            .then((res) => {
              if (res.data.code === 200) {
                if (this.emailChecked === true) {
                  // eslint-disable-next-line no-const-assign
                  this.expirationInDays = 30
                }
                // 将天数转换为毫秒，即 1 天 * 24 小时/天 * 60 分钟/小时 * 60 秒/分钟 * 1000 毫秒/秒
                const expirationMS = this.expirationInDays * 24 * 60 * 60 * 1000
                // 将当前时间的毫秒表示加上过期时间的毫秒数，得到过期时间的毫秒表示
                const expirationTime = new Date().getTime() + expirationMS

                const userData = {
                  data: res.data.data,
                  expiration: expirationTime
                }
                localStorage.setItem('user', JSON.stringify(userData))
                this.user = res.data.data
                this.loginButton = false
                this.emailCodeForm = {}
                // 重新加载当前页面
                location.reload()
              }
            })
            .catch((error) => {
              console.log('请求异常', error)
            })
        } else {
          // 注册表单验证不通过，处理验证失败逻辑
        }
      })
    },
    // 邮箱密码登录
    emailLogin () {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          // 注册表单验证通过，执行注册逻辑
          this.$axios.post('/pcLogin/emailLogin', this.emailForm)
            .then((res) => {
              if (res.data.code === 200) {
                if (this.emailChecked === true) {
                  // eslint-disable-next-line no-const-assign
                  this.expirationInDays = 30
                }
                // 将天数转换为毫秒，即 1 天 * 24 小时/天 * 60 分钟/小时 * 60 秒/分钟 * 1000 毫秒/秒
                const expirationMS = this.expirationInDays * 24 * 60 * 60 * 1000
                // 将当前时间的毫秒表示加上过期时间的毫秒数，得到过期时间的毫秒表示
                const expirationTime = new Date().getTime() + expirationMS

                const userData = {
                  data: res.data.data,
                  expiration: expirationTime
                }
                localStorage.setItem('user', JSON.stringify(userData))
                this.user = res.data.data
                this.loginButton = false
                this.emailForm = {}
                // 重新加载当前页面
                location.reload()
              } else {
                this.$message.warning(res.data.data)
              }
            })
            .catch((error) => {
              console.log('请求异常', error)
            })
        } else {
          // 注册表单验证不通过，处理验证失败逻辑
        }
      })
    },
    // 手机号发送验证码
    phoneSentCode () {
      if (this.phoneCodeForm.phone.trim() === '') {
        this.$message.error('请输入手机号')
        return
      }
      this.phoneDisabled = true
      // 模拟发送请求获取验证码的异步操作，此处使用 axios 发送 POST 请求
      this.$axios.post('/pcLogin/phoneSendCode', this.phoneCodeForm)
        .then((res) => {
          if (res.data.code === 200) {
            console.log('验证码发送成功')

            const countdown = setInterval(() => {
              this.phoneTimer--
              if (this.phoneTimer <= 0) {
                clearInterval(countdown) // 清除倒计时
                this.phoneDisabled = false // 恢复获取验证码按钮可用状态
                this.phoneTimer = 60
              }
            }, 1000)
          }
        })
        .catch((error) => {
          console.log('请求异常', error)
        })
    },
    // 手机号验证码登陆
    phoneCodeLogin () {
      this.$refs.phoneCodeForm.validate((valid) => {
        if (valid) {
          // 注册表单验证通过，执行注册逻辑
          this.$axios.post('/pcLogin/phoneCodeLogin', this.phoneCodeForm)
            .then((res) => {
              if (res.data.code === 200) {
                if (this.checked === true) {
                  this.expirationInDays = 30
                }
                // 将天数转换为毫秒，即 1 天 * 24 小时/天 * 60 分钟/小时 * 60 秒/分钟 * 1000 毫秒/秒
                const expirationMS = this.expirationInDays * 24 * 60 * 60 * 1000
                // 将当前时间的毫秒表示加上过期时间的毫秒数，得到过期时间的毫秒表示
                const expirationTime = new Date().getTime() + expirationMS

                const userData = {
                  data: res.data.data,
                  expiration: expirationTime
                }
                localStorage.setItem('user', JSON.stringify(userData))
                this.user = res.data.data
                this.loginButton = false
                this.emailForm = {}

                // 重新加载当前页面
                location.reload()
              }
            })
            .catch((error) => {
              console.log('请求异常', error)
            })
        } else {
          // 注册表单验证不通过，处理验证失败逻辑
        }
      })
    },
    // 手机号密码登陆
    phoneLogin () {
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          // 注册表单验证通过，执行注册逻辑
          this.$axios.post('/pcLogin/phoneLogin', this.phoneForm)
            .then((res) => {
              if (res.data.code === 200) {
                if (this.checked === true) {
                  this.expirationInDays = 30
                }
                // 将天数转换为毫秒，即 1 天 * 24 小时/天 * 60 分钟/小时 * 60 秒/分钟 * 1000 毫秒/秒
                const expirationMS = this.expirationInDays * 24 * 60 * 60 * 1000
                // 将当前时间的毫秒表示加上过期时间的毫秒数，得到过期时间的毫秒表示
                const expirationTime = new Date().getTime() + expirationMS

                const userData = {
                  data: res.data.data,
                  expiration: expirationTime
                }
                localStorage.setItem('user', JSON.stringify(userData))
                this.user = res.data.data
                this.loginButton = false
                this.phoneForm = {}
                // 重新加载当前页面
                location.reload()
              } else {
                this.$message.warning(res.data.data)
              }
            })
            .catch((error) => {
              console.log('请求异常', error)
            })
        } else {
          // 注册表单验证不通过，处理验证失败逻辑
        }
      })
    },
    checkLocalStorageExpiration () {
      const user = JSON.parse(localStorage.getItem('user'))
      if (user && user.expiration) {
        const currentTime = new Date().getTime()
        if (currentTime > user.expiration) {
          localStorage.removeItem('user')
        }
      }
    }
  },
  created () {
    window.addEventListener('load', this.checkLocalStorageExpiration)
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.id = this.userInfo.id
      this.getFrontUserImg()
    }
  }
}
</script>
<style scoped>
/* .main-dd{
    width:1200px;
    margin:0 auto;
    margin-top:60px
  } */

.span999 {
  text-align: center;
  line-height: 35px;
  font-size: 14px;
  user-select: none;
}
.ddd {
  width: 5%;
  height: 61%;
  float: left;
  margin: 12px 0 0 0;
  color: #fff;
  cursor: pointer;
  background: rgb(63, 185, 103);
}
.div3-2 {
  width: 100%;
  height: 10%;
  text-align: left; /* 设置文本左对齐 */
  /* background: green; */
}
.span1 {
  font-size: 14px;
  line-height: 5px;
  color: #fff;
}
.span2 {
  font-size: 13px;
  line-height: 5px;
  color: rgb(172, 169, 169);
}
.div3-1 {
  width: 100%;
  height: 25%;
  text-align: left; /* 设置文本左对齐 */
  /* background: paleturquoise; */
}
.div3 {
  width: 100%;
  height: 10px;
  /* background: yellow; */
}
.div1-5 {
  width: 90%;
  height: 100%;
  /* background: pink; */
  float: left;
  user-select: none;
}
.div1-4 {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 50%; /* 设置边角半径为 50%，实现圆形效果 */
}
.dd {
  width: 10%;
  height: 10px;
  float: right;
}
.dddd {
  width: 2%;
  height: 100%;
  float: left;
}
.div1-3 {
  width: 35%;
  height: 100%;
  /* background: blueviolet; */
  float: right;
}
.div1-2 {
  margin: 12px 0 0 0;
  width: 35%;
  border: 1px solid rgb(63, 185, 103); /* 输入框点击前 */
  height: 55%;
  outline: 1px rgb(63, 185, 103); /* 输入框点击后 */
  background: white;
  float: left;
}
.img1 {
  width: 100%;
  height: 72%;
  padding-top: 9px;
}
.div1-1 {
  width: 15%;
  height: 100%;
  /* background: pink; */
  float: left;
}
.div1 {
  width: 100%;
  height: 100%;
  /* background: yellow; */
}
.header-dd {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.footer-dd {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 12px 0 rgba(0, 36, 153, 0.06);
  z-index: 999; /* 可选，根据需要设置层级 */
}
/* .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  } */
.span111 {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #333435;
}
.el-main {
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  min-height: calc(100vh - 200px);
  width: 100%;
  margin: 0 auto;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.el-button:focus,
.el-button:hover {
  color: #19caad;
  border-color: #19caad;
  background-color: #fafafa;
}
.wangji {
  cursor: pointer;
}
.span111 {
  /* 初始样式 */
  cursor: default;
}
.span111:hover {
  /* 鼠标移入后的样式 */
  cursor: pointer;
  color: rgb(63, 185, 103);
}
.zhucece:hover {
  cursor: pointer;
}
.spansdfg:hover {
  /* 鼠标移入后的样式 */
  cursor: pointer;
  color: rgb(63, 185, 103);
}
.custom-dialog /deep/ .el-tabs__item {
  font-size: 16px;
}
.custom-dialog /deep/ .el-dialog__header {
  padding-top: 0px;
}
.custom-dialog /deep/ .el-input-group__prepend {
  background-color: #ffffff;
  padding-right: 0px;
}

.custom-dialog /deep/ .el-tabs__item:hover {
  color: rgb(63, 185, 103);
}
.custom-dialog /deep/ .el-tabs__active-bar {
  background: rgb(63, 185, 103);
}
.custom-dialog /deep/ .el-tabs__item.is-active {
  color: rgb(63, 185, 103);
}
.custom-input /deep/ .el-input__inner:focus {
  border-color: rgb(63, 185, 103); /* 设置选中时的边框颜色 */
}
.custom-dialog /deep/ .el-input__inner:focus {
  box-shadow: none; /* 去掉点击时的阴影效果 */
  outline: none;
}
.custom-dialog /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  border: rgb(63, 185, 103);
  background: rgb(63, 185, 103);
}
.custom-dialog /deep/ .el-checkbox__inner:hover {
  border-color: rgb(63, 185, 103);
}
.custom-dialog /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
.custom-dialog /deep/ .el-button{
  color: rgb(63, 185, 103);
}
</style>
